<template>
  <div>
    <el-row>
      <el-button type="text"
                 @click="saveInfo"><i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;添加一级数据</el-button>
      <el-table :data="data"
                row-key="id"
                height="400"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="name"
                         label="问题分类">
        </el-table-column>
        <el-table-column prop="formType"
                         label="表单属性">
          <template slot-scope="scope">
            <div>{{formIdToName(scope.row.formType)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text"
                       :disabled="scope.row.levelNum == 5"
                       @click="saveInfo(scope.row,scope.index)">添加</el-button>
            <el-button type="text"
                       @click="delInfo(scope.row,scope.index)">删除</el-button>
            <el-button type="text"
                       @click="editInfo(scope.row,scope.index)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="problemTitle"
                 v-dialogDrag
                 :visible.sync="dialogVisible"
                 :append-to-body='true'
                 @open="openDataDialog"
                 width="40%">
        <el-form :inline="true"
                 :model="classify"
                 :rules="formRules"
                 ref="formRules"
                 class="demo-form-inline">
          <el-form-item label="问题分类"
                        prop="name">
            <el-input v-model="classify.name"
                      placeholder="请填写"></el-input>
          </el-form-item>
          <el-form-item label="工单模板"
                        prop="formType">
            <el-select v-model="classify.formType"
                       placeholder="请选择">
              <el-option v-for="item in formoptions"
                         :key="item.id+''"
                         :label="item.name"
                         :value="item.id+''"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button type="primary"
                     @click="saveForm('formRules')">确定
          </el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </el-row>
    <el-row>
      <el-button type="button"
                 style="float:right;padding-top:10px"
                 class="el-button el-button--primary el-button--medium h30Btn"
                 @click="getTableData">确定</el-button>
      <el-button type="button"
                 style="float:right;padding-top:10px"
                 class="el-button el-button--primary el-button--medium h30Btn"
                 @click="cancelTransfer">取消</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["formoptions", "tableData"],
  data () {
    return {
      row: '',
      type: "",
      id: 0,
      firstId: 1,
      dialogVisible: false,
      classify: {
        id: 12,
        name: '',
        formType: ''
      },
      formRules: {
        name: [{
          required: true,
          message: '请输入问题分类',
          trigger: ['blur']
        }],
        formType: [{
          required: true,
          message: '请选择模板',
          trigger: ['blur']
        }],
      },
      data: this.tableData || [],
      problemTitle: ''
    }
  },
  mounted () {
  },
  computed: {
    // 转换模板内容
    formIdToName (id) {
      return function (id) {
        for (var i in this.formoptions) {
          let idN = Number(id)
          let idName = ''
          if (idN === this.formoptions[i].id) {
            idName = this.formoptions[i].name
            return idName
          }
        }
      }
    },
  },
  methods: {
    // 二次打开弹框时初始话界面
    // openDataDialog () {
    //   if (this.type === "1") {
    //     this.$nextTick(function () {
    //       this.$refs['formRules'].resetFields();
    //     });
    //   }
    // },
    // 关闭弹框method
    cancelTransfer () {
      this.$emit('cancelDialog', false)
    },
    // 新增封装
    saveFun (data, id) {
      if (!id) {
        this.firstId = data.length + 1 || 1
        data.push({
          id: this.firstId,
          name: this.classify.name,
          formType: this.classify.formType,
          levelNum: 0,
        })
        this.firstId++
      } else {
        for (var i = 0; i < data.length; i++) {
          if (data[i].children) {
            if (id == data[i].id) {
              const sid = id * 10 + data[i].children.length + 1
              const num = data[i].children.length + 1
              data[i].children.push({
                id: sid,
                name: this.classify.name,
                formType: this.classify.formType,
                levelNum: 0
              })
              data[i].levelNum = num
            } else {
              this.saveFun(data[i].children, id)
            }
          } else {
            if (id == data[i].id) {
              this.$set(data[i], "children", [])
              const sid = id * 10 + data[i].children.length + 1
              const num = data[i].children.length + 1
              data[i].children.push({
                id: sid,
                name: this.classify.name,
                formType: this.classify.formType,
                levelNum: 0
              })
              data[i].levelNum = num
            }
          }
        }
      }
    },
    // 新增弹框确认事件
    saveForm (formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (_this.type == "1") {
            _this.saveFun(_this.data, _this.id)
          } else {
            _this.editFun(_this.row, _this.classify)
          }
          _this.dialogVisible = false

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取新增当前数据的信息
    saveInfo (row, index) {
      this.dialogVisible = true
      this.problemTitle = '添加'
      this.id = row.id
      this.type = "1"
      for (var i in this.classify) {
        this.classify[i] = ''
      }
    },
    // 删除数据封装
    delFun (data, id) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children) {
          if (id == data[i].id) {
            data.splice(i, 1)
          } else {
            this.delFun(data[i].children, id)
          }
        } else {
          if (id == data[i].id) {
            data.splice(i, 1)
          }
        }
      }
    },
    // 删除数据
    delInfo (row, index) {
      this.delFun(this.data, row.id)
    },
    // 编辑封装
    editFun (row, newData) {
      row = newData
    },
    // 编辑数据
    editInfo (row, index) {
      this.dialogVisible = true
      this.problemTitle = '编辑'
      this.classify = row
      this.row = row
      this.type = "2"
    },
    //筛选空的children
    filtersChildren (data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children && data[i].children.length < 1) {
          delete data[i].children
        } else if (data[i].children && data[i].children.length > 0) {
          this.filtersChildren(data[i].children)
        }
      }
      return data
    },
    getTableData () {
      this.data = this.filtersChildren(this.data)
      let params = {
        data: this.data,
        show: false
      }
      this.$emit("changeShow", params)
    }
  }
}
</script>

<style scoped>
</style>
